概述

昨天建置完 Vue 的開發的環境後，今天會記錄在 Vue 前端呼叫 Java Spring 後端建置的 API 的基本方式及過程，並以列出所有 post 的功能為例。

呼叫 API

這邊使用 Axois 來呼叫 API。axios 是一個可以實現非同步請求的 HTTP 工具，也就是說使用這個工具後可以讓網頁請求等待資源的回饋的同時不影響其他的運作，在資料渲染上也會等待該請求有回復後做呈現。

在 Vue 中引用這個工具要使用 npm 來做 install。在 cmd 中輸入以下

npm install axios

而在「取得 Post」這個功能中要使用 GET 這個 method，就如同在 Postman 的測試一樣。

get 語法

axios.get('https://......')
    .then(function (response){
      console.log(response.data);
    })
    .catch(function (error) {
      console.log(error);
    });

而在 Vue 中，可以先在 Component 中建立一個自定義 vue 檔案，這邊建立 Post.vue 來做 API 的測試。(記得要啟動 Java Spring 的 main class 程式喔，不然 API 是無法運作的)

以下是在 Post.vue 中的程式碼:

<script>
import axios from "axios";
export default {
  data() {
            return {
                postList: [],
            };
        },
  async mounted() {
            await this.postRequest()
        },
        methods: {
        postRequest() {
              axios.get("http://localhost:8080/api/posts")
                    .then(res => {
                        res = JSON.stringify(res.data)
                        res = JSON.parse(res)
                        this.postList = res.content;
                      
                    })
                    // Manage errors if 
                    .catch(error => {
                        if (error.request.status == 503) {
                            setTimeout(() => {
                                this.foodRequest()
                            }, 0.1);
                        }
                    })
            }
          }

}
</script>
<template>
  <h1>Post Test</h1>
  <ul v-for="post in postList" :key="post.id">
    <li >{{ post.description }}
    </li>
  </ul>
</template>

<style scoped>
</style>

在建立以上檔案後，記得要在 App.vue 這個預設的入口的頁面設定中，引入 Post.vue，如下:

<script setup>
//import HelloWorld from './components/HelloWorld.vue'
import Post from './components/Post.vue'
</script>

<template>
  <!-- <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div> -->
  <post></post>
  <!-- <HelloWorld msg="Vite + Vue" /> -->

</template>

準備就緒後，在 cmd 中輸入以下來啟動專案:

npm run dev

但!!!! 就在啟動後遇到了以下問題:

has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

這是因為後端未設定 CORS header，使用 Axios 來呼叫 API，會去檢查是否來源於同一個 origin，如果在後端沒有特別設定，則會阻擋請求一個不同來源的 API。要解決這個問題當然也可以就不使用 Axios 的話並不是一個好的方法，因為這樣等於是去除了一個安全性的特質。所以這裡主要是要在後端去做修改，在 Controller 的檔案中使用以下:

@CrossOrigin(allowedHeaders = {"Authorization", "Origin"})

參考:

Configuring CORS with Spring Boot and Spring Security

新增這段註釋後，就可以成功 request 了喔~

今天已成功獲取到後端建置的 API 內容，明天將會深入了解 API 請求的方法~

有問題歡迎在底下留言討論，明天見~